<template>
  <scroll-view class="home-app d-flex flex-column" scroll-y @scroll="handleScroll" :class="isshow ? 'noScroll' : ''">
    <view class="navigate">
      <mineNavbar :styleData="styleData">
        <view class="tabbarTop">
          <view class="left">
            <picker :value="classifyIndex" mode="multiSelector" :range="classifyArr" range-key="label"
              @change="handleSelect" @columnchange="handleColumnChange" class="picker">
              <view class="location">
                <image src="@/static/images/recruit/location.png" />
                <text>{{ cityName }}</text>
              </view>
            </picker>
            <view class="right" @click="handleFocus">
              <image src="@/static/images/recruit/search.png" />
              <view class="r_input">搜索职位/公司名称</view>
            </view>
          </view>
        </view>
      </mineNavbar>
    </view>
    <view class="swiperContain">
      <swiper indicator-dots indicator-active-color="#fff" autoplay="true" class="swiper">
        <swiper-item v-for="item in swiperList" :key="item.contentId">
          <view @click="goWeb(item)">
            <image :src="item.url" :mode="item.title" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="advertised" v-if="isshow">
      <view class="a_content">
        <image :src="adObj.url" class="showImg" :mode="adObj.title" @click="goWeb(adObj)" />
        <image src="@/static/images/recruit/cancel.png" class="cancelImg" @click="handleClose" />
      </view>
    </view>
    <view class="category" :class="isshow ? 'isshowSty' : ''">
      <view class="quatlist">
        <view v-for="item in quicklinksList" :key="item.contentId" @click="handleLinks(item)">
          <image :src="item.url" />
          <text>{{ item.title }}</text>
        </view>
      </view>
      <view class="swiperContain1" v-if="swiperList1.length">
        <swiper indicator-dots indicator-active-color="#fff" autoplay="true" class="swiper">
          <swiper-item v-for="item in swiperList1" :key="item.contentId">
            <view @click="goWeb(item)">
              <image :src="item.url" :mode="item.title" />
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="workTypeSty">
        <view>
          <view class="left">
            <view v-for="item in workTypeArr" :key="item.value" @click="changeWorkType(item)">
              <view :class="positionType === item.value ? 'active' : 'common'">{{ item.label }}</view>
              <image src="@/static/images/recruit/wan.png" v-if="positionType === item.value" />
            </view>
          </view>
          <view class="right">
            <image src="@/static/images/recruit/fenlei.png" v-if="iconChange" @click="changeIcon" />
            <image src="@/static/images/recruit/fenlei1.png" v-else @click="changeIcon" />
          </view>
        </view>
      </view>

      <scroll-view class="bottom" scroll-y :class="scrollValue" @scrolltolower="scrollBottomFn">
        <view class="sroll" v-if="workTypeList.length">
          <workType v-if="iconChange" :workTypeValue="workTypeList" :positionType="positionType"></workType>
          <workTypeImg v-else :workTypeValue="workTypeList" :positionType="positionType"></workTypeImg>
          <view class="downLoad">--加载完成，共{{ workTypeList.length }}条数据--</view>
        </view>
        <view v-else class="noScroll">
          <noneState></noneState>
        </view>
      </scroll-view>
    </view>
  </scroll-view>
</template>

<script>
import { regionTreeAPI } from "@/api/common.js";
import {
  getJobs,
  getQuicklinks,
  getTime,
  popupAd,
  slideshows,
  streamer
} from "@/api/pages/home.js";
import noneState from "@/pages/recruit/components/noneState.vue";

import workType from "./workType/index.vue";
import workTypeImg from "./workTypeImg/index.vue";

export default {
  components: {
    workType,
    workTypeImg,
    noneState,
  },
  data() {
    return {
      styleData: {
        topText: null,
        show: false,
      },
      scrollTop: 0,
      pageSize: 10,
      pageNum: 1,
      pageTotal: 1,
      adObj: {},
      swiperList: [],
      swiperList1: [],
      cityName: "广州",
      cityId: "4401",
      area: '',
      isshow: false,
      addressList: [],
      classifyArr: [[], []], // picker - 数据源
      classifyIndex: [18, 0], // picker - 索引
      positionType: 3,
      fullPositionName: "",
      quicklinksList: [],
      workTypeArr: [
        { label: "全职岗位", value: 3 },
        { label: "小时工兼职", value: 2 },
        { label: "零工兼职", value: 1 },
      ],
      workTypeList: [],
      iconChange: true, // 分类图标的切换
      longitude: "113.280637",
      latitude: "23.125178",
      scrollValue: "",
      isscrollValue: false,
    };
  },
  computed: {},
  watch: {
    updateData(newVal, oldVal) {
      console.log(newVal, "=====newVal=====");
    },
    pageNum(newVal, oldVal) {
      console.log("变化了");
    },
  },
  onLoad(options) {
    console.log(3455);
  },
  onShow() {
    console.log(123);
  },
  onReady() { },
  created() { },
  mounted() {
    let that = this;
    uni.getLocation({
      type: "wgs84",
      success: function (res) {
        const { errMsg, longitude, latitude } = res;
        if (errMsg == "getLocation:ok") {
          that.longitude = longitude;
          that.latitude = latitude;
          that.jobs();
        }
      },
    });
    this.handledSlide();
    this.handlePopupAd();
    this.quicklinks();
    this.handleRegion();
  },
  methods: {
    // 每次调用页面都加载
    // handleUpdate() {
    //   // 获取查询条件数据
    //   uni.$on("updateData", this.onSubmit);
    // },
    onSubmit(item) {
      this.positionType = item.positionType;
      this.fullPositionName = item.fullPositionName;
      this.pageNum = 1;
      this.pageSize = 10;
      this.jobs();
      uni.$off("updateData");
    },
    // 获取城市数据
    handleRegion() {
      regionTreeAPI({}).then((res) => {
        if (res.code == 200) {
          this.addressList = res.data;
          // 获取父级分类
          this.classifyArr[0] = this.addressList || [];
          this.classifyArr[1] = this.addressList[18].children || [];
          this.classifyArr[2] = this.addressList[18].children[0].children || [];
        }
      });
    },
    // 打开新页面
    handleLinks(item) {
      if (item.link.includes("?")) {
        const queryParams = item.link.split("?")[1].split("&");
        const res = {};
        queryParams.forEach((param) => {
          const [key, value] = param.split("=");
          console.log(key, value);
          if (key && value) {
            let parsedValue;
            try {
              parsedValue = JSON.parse(decodeURIComponent(value));
              console.log(parsedValue, "try");
            } catch (error) {
              parsedValue = decodeURIComponent(value);
              console.log(parsedValue, "catch");
            }
            res[key] = parsedValue;
          }
        });
        this.$store.commit("setPathData", res);
      } else {
        this.$store.commit("setPathData", null);
      }
      let str = item.link[0];
      let tab = item.link.indexOf("tabbarChange");
      console.log(str, tab);
      if (str === "/") {
        if (tab === -1) {
          uni.navigateTo({
            url: item.link,
          });
        } else {
          uni.switchTab({
            url: item.link,
          });
        }
      } else {
        uni.navigateTo({
          url: "/pages/recruit/home/webview/index?link=" + item.link,
        });
      }
    },
    // 获取首页金刚区
    quicklinks() {
      getQuicklinks().then((res) => {
        if (res.code == 200) {
          this.quicklinksList = res.data;
        }
      });
    },
    // 获取岗位列表（岗位模块通用）
    jobs() {
      let that = this;
      getJobs({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        longitude: this.longitude,
        latitude: this.latitude,
        city: this.cityId,
        area: this.areaId,
        positionType: this.positionType,
        fullPositionName: this.fullPositionName,
      }).then((res) => {
        if (res.code == 200) {
          this.pageTotal = Math.ceil(res.total / this.pageSize);
          if (this.pageNum === 1) {
            that.workTypeList = res.rows;
            console.log(that.workTypeList.length);
          } else {
            res.rows.forEach((suc) => {
              that.workTypeList.push(suc);
            });
          }
        }
      });
    },

    // 获取广告
    handlePopupAd() {
      // 解决一天只显示一次广告
      const ONE_DAY = 24 * 60 * 60 * 1000; // 1天的毫秒数
      const now = new Date().getTime(); // 当前时间的毫秒数
      const timestamp = uni.getStorageSync("timeWarp") || null;
      console.log(uni.getStorageSync("timeWarp"), "timestamp");
      if (now - timestamp > ONE_DAY || !timestamp) {
        popupAd().then((res) => {
          if (res.code == 200) {
            if (res.data) {
              uni.setStorageSync("timeWarp", now);
              this.adObj = res.data;
              this.isshow = true;
            }
          }
        });
      }
    },
    // 获取轮播图
    handledSlide() {
      slideshows().then((res) => {
        if (res.code == 200) {
          this.swiperList = res.data;
        }
      });
      streamer().then((res) => {
        if (res.code == 200) {
          this.swiperList1 = res.data;
          console.log(this.swiperList1);
        }
      });
    },
    // 跳转外部链接
    goWeb(item) {
      if (item.link.includes("?")) {
        const queryParams = item.link.split("?")[1].split("&");
        const res = {};
        queryParams.forEach((param) => {
          const [key, value] = param.split("=");
          console.log(key, value);
          if (key && value) {
            let parsedValue;
            try {
              parsedValue = JSON.parse(decodeURIComponent(value));
              console.log(parsedValue, "try");
            } catch (error) {
              parsedValue = decodeURIComponent(value);
              console.log(parsedValue, "catch");
            }
            res[key] = parsedValue;
          }
        });
        this.$store.commit("setPathData", res);
      } else {
        this.$store.commit("setPathData", null);
      }
      let str = item.link[0];
      let tab = item.link.indexOf("tabbarChange");
      console.log(str, tab);
      if (str === "/") {
        if (tab === -1) {
          uni.navigateTo({
            url: item.link,
          });
        } else {
          uni.switchTab({
            url: item.link,
          });
        }
      } else {
        console.log(item.link);
        uni.navigateTo({
          url: "/pages/recruit/home/webview/index?link=" + item.link,
        });
      }
    },

    handleFocus() {
      // 切到搜索页面
      uni.navigateTo({
        url: "/pages/recruit/home/search/index",
      });
    },
    // 关闭广告弹窗
    handleClose() {
      this.isshow = false;
    },
    // 选择城市
    handleSelect(e) {
      let index = e.detail.value;
      console.log(index, "index");
      this.classifyIndex = index;
      // 获取选中城市地址
      if (this.classifyArr[0].length != 0) {
        this.cityName = this.classifyArr[0][index[0]].children[index[1]].children[index[2]].label;
        this.cityId = this.classifyArr[0][index[0]].children[index[1]].id;
        this.areaId = this.classifyArr[0][index[0]].children[index[1]].children[index[2]].id;
      }
      this.pageNum = 1;
      this.pageSize = 10;
      this.jobs();
    },
    // 滑动城市触发
    handleColumnChange(e) {
      let index = e.detail.value;
      // 当滚动切换一级分类时，为当前的一级分类添加它的子类
      if (e.detail.column == 0) {
        this.classifyArr[1] = this.classifyArr[0][index].children;
        this.classifyArr[2] = this.classifyArr[1][0].children;
        this.$set(this.classifyArr, 1, this.classifyArr[0][index].children);
      }
      if (e.detail.column == 1) {
        this.classifyArr[2] = this.classifyArr[1][index].children;
        this.$set(this.classifyArr, 2, this.classifyArr[1][index].children);
      }
    },
    //切换工作类型
    changeWorkType(e) {
      this.positionType = e.value;
      this.fullPositionName = "";
      this.pageNum = 1;
      this.pageSize = 10;
      this.jobs();
    },
    // 切换图标
    changeIcon() {
      this.iconChange = !this.iconChange;
    },
    // 监听页面滚动
    handleScroll(e) {
      if (e.detail.scrollTop >= 200) {
        const sty = this.swiperList1.length ? 'workScroll' : 'workScroll1'
        this.scrollValue = sty;
        this.isscrollValue = true;
        this.styleData.background = "#fff";
      } else {
        this.scrollValue = "";
        this.isscrollValue = false;
        this.styleData.background = "none";
      }
    },
    // 监听滑动到底部
    scrollBottomFn() {
      this.pageNum += 1;
      if (this.pageNum <= this.pageTotal) {
        this.jobs();
      } else {
        uni.showToast({
          title: "没有更多了",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.home-app {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .advertised {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .a_content {
      width: 620rpx;
      height: 915rpx;
      position: relative;

      .showImg {
        width: 620rpx;
        height: 915rpx;
      }

      .cancelImg {
        width: 56rpx;
        height: 56rpx;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  }

  .navigate {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .tabbarTop {
    width: 100%;
    font-size: 24rpx;
    display: flex;
    flex-wrap: nowrap;

    .left {
      height: 80rpx;
      display: flex;
      align-items: center;

      .location {
        width: 120rpx;
        display: flex;
        align-items: center;
        color: #fff;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 3px;
        }
      }

      .right {
        height: 60rpx;
        width: 410rpx;
        display: flex;
        align-items: center;
        border-radius: 64px;
        background-color: #fff;
        border-radius: 64px;
        color: #00000033;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 10rpx;
          margin-right: 20rpx;
          margin-left: 20rpx;
        }
      }
    }
  }

  .swiperContain {
    width: 100%;
    height: 568rpx;

    .swiper {
      height: 100%;

      image {
        width: 100%;
        height: 480rpx;
      }
    }
  }

  .category {
    width: 100%;
    position: absolute;
    top: 450rpx;
    left: 0;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: column;

    .quatlist {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      >view {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        margin-top: 30rpx;

        image {
          width: 88rpx;
          height: 88rpx;
          margin-bottom: 5px;
        }
      }
    }

    .swiperContain1 {
      width: 100%;
      padding: 0 24rpx;
      height: 180rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      overflow: hidden;
      margin: 30rpx 0;

      .swiper {
        height: 100%;
        border-radius: 40rpx;

        image {
          width: 100%;
          height: 180rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
}

.workTypeSty {
  color: #000;
  margin-top: 20rpx;

  >view {
    height: 100%;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      >view {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 10px;
        margin-right: 5px;

        >view {
          margin-bottom: 5px;
          color: rgba(0, 0, 0, 0.5);
          font-size: 12px;
        }

        .active {
          color: #000;
          font-size: 32rpx;
          font-family: PingFang-SC-Heavy;
          font-weight: 900;
          margin-top: 15rpx;
        }
      }

      image {
        width: 20px;
        height: 8px;
      }
    }

    .right {
      margin-right: 10px;

      image {
        width: 24px;
        height: 24px;
      }
    }
  }

  .sroll {
    height: 100rpx;
    overflow: auto;
  }
}

.bottom {
  background: #f9f9f9;
  // height: calc(100vh - 560rpx);
  overflow: auto;
  position: relative;
  padding-top: 20rpx;

  .downLoad {
    font-size: 24rpx;
    color: #00000033;
    width: 100%;
    height: 50rpx;
    line-height: 30rpx;
    text-align: center;
    margin-bottom: 20rpx;
  }
}

.workScroll {
  height: calc(100vh - 250rpx);
}

.workScroll1 {
  height: calc(100vh - 230rpx);
}

.noScroll {
  z-index: 999;
}

.isshowSty {
  height: calc(100vh - 450rpx);
  overflow: hidden;
}
</style>
